<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类</title>
</head>
<body>
<div class="web">
    <header>
        <div class="box">
            <div class="back">
                <span>back</span>
            </div>
            <div class="my">
                <span>分类</span>
            </div>
            <div class="city">
                <span class="iconfont icon-xiala"></span>
                <select name="city">
                    <option value="volvo">上海市</option>
                    <option value="saab">北京市</option>
                    <option value="fiat" selected>广州市</option>
                    <option value="audi">深圳市</option>
                </select>
            </div>
        </div>
    </header>
    <main>
        <div class="active">
            <div class="run">
                <img src="../img/class-1.png" alt="">
            </div>
            <div class="run">
                <img src="../img/class-2.png" alt="">
            </div>
            <div class="run">
                <img src="../img/class-3.png" alt="">
            </div>
            <div class="run">
                <img src="../img/class-4.png" alt="">
            </div>
        </div>
        <div class="text">
            <ul class="clearfix">
                <li>美食</li>
                <li>电影</li>
                <li>运动</li>
                <li>唱歌</li>
            </ul>
        </div>
        <div class="buy clearfix">
            <div class="buy_left fl">
                <span class="iconfont icon-meishi hue"></span>
                <span>美食类</span>
            </div>
            <div class="buy_right fr">
                <span>更多</span>
                <span class="iconfont icon-more hue"></span>
            </div>
        </div>
        <div class="foods">
            <div class="run">
                <img src="../img/food-1.png" alt="">
            </div>
            <div class="run">
                <img src="../img/food-2.png" alt="">
            </div>
            <div class="run">
                <img src="../img/find-3.png" alt="">
            </div>
            <div class="run">
                <img src="../img/food-4.png" alt="">
            </div>
        </div>
        <div class="buy clearfix">
            <div class="buy_left fl">
                <span class="iconfont icon-yundonglei hue"></span>
                <span>运动类</span>
            </div>
            <div class="buy_right fr">
                <span>更多</span>
                <span class="iconfont icon-more hue"></span>
            </div>
        </div>
        <div class="foods">
            <div class="run">
                <img src="../img/run-1.png" alt="">
            </div>
            <div class="run">
                <img src="../img/run-2.png" alt="">
            </div>
            <div class="run">
                <img src="../img/run-3.png" alt="">
            </div>
            <div class="run">
                <img src="../img/run-4.png" alt="">
            </div>
        </div>
        <div class="buy clearfix">
            <div class="buy_left fl">
                <span class="iconfont icon-dianying hue"></span>
                <span>电影类</span>
            </div>
            <div class="buy_right fr">
                <span>更多</span>
                <span class="iconfont icon-more hue"></span>
            </div>
        </div>
        <div class="foods">
            <div class="run">
                <img src="../img/move-1.png" alt="">
            </div>
            <div class="run">
                <img src="../img/move-2.png" alt="">
            </div>
            <div class="run">
                <img src="../img/move-2.png" alt="">
            </div>
            <div class="run">
                <img src="../img/move-1.png" alt="">
            </div>
        </div>
        <div class="buy clearfix">
            <div class="buy_left fl">
                <span class="iconfont icon-dianying hue"></span>
                <span>音乐类</span>
            </div>
            <div class="buy_right fr">
                <span>更多</span>
                <span class="iconfont icon-more hue"></span>
            </div>
        </div>
        <div class="foods">
            <div class="run">
                <img src="../img/move-1.png" alt="">
            </div>
            <div class="run">
                <img src="../img/move-2.png" alt="">
            </div>
            <div class="run">
                <img src="../img/move-2.png" alt="">
            </div>
            <div class="run">
                <img src="../img/move-1.png" alt="">
            </div>
        </div>
        <div class="buy clearfix">
            <div class="buy_left fl">
                <span class="iconfont icon-dianying hue"></span>
                <span>文艺类</span>
            </div>
            <div class="buy_right fr">
                <span>更多</span>
                <span class="iconfont icon-more hue"></span>
            </div>
        </div>
        <div class="foods">
            <div class="run">
                <img src="../img/move-1.png" alt="">
            </div>
            <div class="run">
                <img src="../img/move-2.png" alt="">
            </div>
            <div class="run">
                <img src="../img/move-2.png" alt="">
            </div>
            <div class="run">
                <img src="../img/move-1.png" alt="">
            </div>
        </div>
        <div class="buy clearfix">
            <div class="buy_left fl">
                <span class="iconfont icon-dianying hue"></span>
                <span>购物类</span>
            </div>
            <div class="buy_right fr">
                <span>更多</span>
                <span class="iconfont icon-more hue"></span>
            </div>
        </div>
        <div class="foods">
            <div class="run">
                <img src="../img/move-1.png" alt="">
            </div>
            <div class="run">
                <img src="../img/move-2.png" alt="">
            </div>
            <div class="run">
                <img src="../img/move-2.png" alt="">
            </div>
            <div class="run">
                <img src="../img/move-1.png" alt="">
            </div>
        </div>
        <div class="buy clearfix">
            <div class="buy_left fl">
                <span class="iconfont icon-dianying hue"></span>
                <span>电影类</span>
            </div>
            <div class="buy_right fr">
                <span>更多</span>
                <span class="iconfont icon-more hue"></span>
            </div>
        </div>
        <div class="foods">
            <div class="run">
                <img src="../img/move-1.png" alt="">
            </div>
            <div class="run">
                <img src="../img/move-2.png" alt="">
            </div>
            <div class="run">
                <img src="../img/move-2.png" alt="">
            </div>
            <div class="run">
                <img src="../img/move-1.png" alt="">
            </div>
        </div>
    </main>
    <footer>
        <div class="menu">
            <div class="box">
                <div class="home">
                    <a href="./index.html" class="iconfont icon-shouye"></a>
                    <p>首页</p>
                </div>
                <div class="home">
                    <a href="./classify.html" class="iconfont icon-fenlei"></a>
                    <p>分类</p>
                </div>
                <div class="home">
                    <a href="./find.html" class="iconfont icon-faxian"></a>
                    <p>发现</p>
                </div>
                <div class="home">
                    <a href="./personal.html" class="iconfont icon-wode"></a>
                    <p>我的</p>
                </div>
            </div>
        </div>
    </footer>
</div>
</body>
</html>